<script setup lang="ts">
import type { MenuDetailResult } from "@/api/types";
import { ElMessage } from "element-plus";
import { computed, watch } from "vue";
import IconSelect from "@/components/ReIcon/src/select/index";
import { $t } from "@/plugins/i18n";
import { useMenuForm, useMenuOptions } from "../composables";
import { menuFormRules as rules } from "../utils/rules";
import MenuCascader from "./MenuCascader.vue";

interface Props {
    visible?: boolean;
    editData?: MenuDetailResult | null;
    parentId?: string | null;
}

interface Emits {
    (e: "update:visible", visible: boolean): void;
    (e: "success"): void;
}

const props = withDefaults(defineProps<Props>(), {
    visible: false,
    editData: null,
});

const emit = defineEmits<Emits>();

const { menuTypeOptions } = useMenuOptions();
const {
    getInitFormMeta,
    formData,
    resetForm,
    formRef,
    submitLoading,
    menuType,
    onSubmit,
} = useMenuForm();

const isEdit = computed(() => !!props.editData);

watch(
    () => props.visible,
    (val) => {
        if (val) {
            resetForm();
            if (props.editData) {
                Object.assign(formData, props.editData);
                formData.meta = Object.assign(getInitFormMeta(), props.editData.meta || {});
            } else {
                formData.parentId = props.parentId || null;
            }
        }
    },
);

/** 提交表单 */
function handleSubmit() {
    onSubmit(isEdit.value, (message: string) => {
        ElMessage.success($t(message));
        emit("success");
        handleClose();
    });
}

/** 关闭弹窗 */
function handleClose() {
    emit("update:visible", false);
}
</script>

<template>
    <el-dialog :model-value="visible" :title="isEdit ? $t('button.edit') : $t('button.add')" width="900px" @close="handleClose">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto" label-position="right">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item :label="$t('label.menuType')" prop="meta.menuType">
                        <el-segmented v-model="formData.meta.menuType" :options="menuTypeOptions" />
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item :label="$t('label.parentMenu')" prop="parentId">
                        <MenuCascader v-model="formData.parentId" class="w-full" />
                    </el-form-item>
                </el-col>

                <el-col :span="24" :sm="menuType === 'button' ? 24 : 12">
                    <el-form-item :label="$t('label.menuName')" prop="meta.title">
                        <el-input v-model.trim="formData.meta.title" :placeholder="$t('placeholder.inputName')">
                            <template #append>
                                {{ $t(formData.meta?.title) }}
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <template v-if="['menu'].includes(menuType)">
                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.activePath')" prop="meta.activePath">
                            <el-input v-model.trim="formData.meta.activePath" :placeholder="$t('placeholder.inputMenuActivePath')" />
                        </el-form-item>
                    </el-col>
                </template>

                <template v-if="['iframe', 'external'].includes(menuType)">
                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.linkAddress')" prop="meta.url">
                            <el-input v-model.trim="formData.meta.url" :placeholder="$t('placeholder.inputIframeLink')" />
                        </el-form-item>
                    </el-col>
                </template>

                <template v-if="['menu', 'iframe', 'external'].includes(menuType)">
                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.routePath')" prop="path">
                            <el-input v-model.trim="formData.path" :placeholder="$t('placeholder.inputRoutePath')" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.routeName')" prop="name">
                            <el-input v-model.trim="formData.name" :placeholder="$t('placeholder.inputRouteName')" />
                        </el-form-item>
                    </el-col>
                </template>

                <template v-if="['menu'].includes(menuType)">
                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.componentPath')" prop="component">
                            <el-input v-model.trim="formData.component" :placeholder="$t('placeholder.inputComponentPath')" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.redirection')" prop="redirect">
                            <el-input v-model.trim="formData.redirect" :placeholder="$t('placeholder.inputRouteRedirect')" />
                        </el-form-item>
                    </el-col>
                </template>

                <template v-if="['menu', 'iframe', 'external'].includes(menuType)">
                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.icon')" prop="meta.icon">
                            <IconSelect v-model="formData.meta.icon as string" class="w-full" />
                        </el-form-item>
                    </el-col>
                </template>

                <template v-if="['button'].includes(menuType)">
                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.permissionCode')" prop="meta.auth">
                            <el-input v-model="formData.meta.auth" :placeholder="$t('placeholder.inputPermissionCode')" class="w-full h-full" />
                        </el-form-item>
                    </el-col>
                </template>

                <el-col :span="24" :sm="12">
                    <el-form-item :label="$t('label.menuRank')" prop="meta.rank">
                        <el-input-number v-model.number="formData.meta.rank" :min="1" :max="9999" :placeholder="$t('placeholder.input')" class="w-full!" />
                    </el-form-item>
                </el-col>

                <template v-if="['button'].includes(menuType)">
                    <el-col :span="24">
                        <el-form-item :label="$t('label.remark')" prop="meta.remark">
                            <el-input
                                v-model="formData.meta.remark"
                                type="textarea"
                                :rows="2"
                                maxlength="200"
                                show-word-limit
                                :placeholder="$t('placeholder.inputPermissionRemark')"
                                class="w-full h-full"
                            />
                        </el-form-item>
                    </el-col>
                </template>

                <template v-if="['menu', 'iframe', 'external'].includes(menuType)">
                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.showMenu')" prop="meta.showLink">
                            <el-switch
                                v-model="formData.meta.showLink"
                                inline-prompt
                                :active-text="$t('button.openText')"
                                :inactive-text="$t('button.closeText')"
                            />
                        </el-form-item>
                    </el-col>
                </template>

                <template v-if="['menu', 'iframe'].includes(menuType)">
                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.keepAlive')" prop="meta.keepAlive">
                            <el-switch
                                v-model="formData.meta.keepAlive"
                                inline-prompt
                                :active-text="$t('button.openText')"
                                :inactive-text="$t('button.closeText')"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.hiddenTab')" prop="meta.hiddenTag">
                            <el-switch
                                v-model="formData.meta.hiddenTag"
                                inline-prompt
                                :active-text="$t('button.openText')"
                                :inactive-text="$t('button.closeText')"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24" :sm="12">
                        <el-form-item :label="$t('label.fixedTag')" prop="meta.fixedTag">
                            <el-switch
                                v-model="formData.meta.fixedTag"
                                inline-prompt
                                :active-text="$t('button.openText')"
                                :inactive-text="$t('button.closeText')"
                            />
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
        </el-form>

        <template #footer>
            <div class="text-right">
                <el-button @click="handleClose">
                    {{ $t("button.cancel") }}
                </el-button>
                <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
                    {{ $t("button.confirm") }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
